<template>
    <el-dialog title="注册按钮" destroy-on-close :close-on-click-modal="false" :visible.sync="visible"
        :before-close="closeDailog">

        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="80px">
            <ec-form-item-header value="菜单信息"></ec-form-item-header>
            <el-row :gutter="15" v-for="(item,index) in modulPathInfo" :key="index">
                <el-col :span="12">
                    <el-form-item label="模块名称" prop="moduleName">
                        <el-input v-model="item.moduleName" readonly placeholder="模块名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="模块标识" prop="moduleValue">
                        <el-input v-model="item.moduleValue" readonly placeholder="模块标识"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <ec-form-item-header value="按钮信息"></ec-form-item-header>
            <!-- 表格表体 -->
            <ec-table :data="tabledata" v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" header-align="center" align="center" width="50">
                </el-table-column>
                <el-table-column prop="actionName" header-align="center" align="center" show-overflow-tooltip
                    label="按钮名称">
                </el-table-column>
                <el-table-column prop="actionValue" header-align="center" align="center" show-overflow-tooltip
                    label="按钮编码">
                </el-table-column>
                <el-table-column prop="authority" header-align="center" align="center" show-overflow-tooltip
                    label="按钮权限标识">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.authority" placeholder="按钮权限标识"></el-input>
                    </template>
                </el-table-column>
            </ec-table>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDailog">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="dataFormSubmit()"
                :disabled="multipleSelection.length==0">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import * as actionService from '@/api/upms/action'
    import * as menuService from '@/api/upms/menu'
    export default {
        data() {
            return {
                visible: false,
                submitLoading: false,
                loading: false,
                tabledata: [{
                    actionName: '',
                    actionValue: '',
                    authority: ''
                }],
                modulPathInfo: [],
                dataForm: {
                    menuId: '',
                    menuName: '',
                    menuValue: '',
                    moduleId: '',
                    moduleName: '',
                    moduleValue: ''
                },
                moduleId: '',
                dataRule: {

                },
                multipleSelection: []
            }
        },
        methods: {
            init(moduleId) {
                this.visible = true
                this.moduleId = moduleId
                this.$nextTick(() => {
                    this.getModelPathData(moduleId)
                })
            },
            getModelPathData(moduleId) {
                menuService.getModulePath(moduleId).then(data => {
                    if (data) {
                        this.modulPathInfo = []
                        this.modulPathInfo = data;
                    }
                    // 查询数据
                    this.getDataTable()
                });
            },
            getPath() {
                if (this.modulPathInfo.length > 0) {
                    this.modulPathInfo.sort(this.sortBy('moduleId',false))
                    console.log(this.modulPathInfo.sort(this.sortBy('moduleId',false)))
                    let path = ""
                    this.modulPathInfo.forEach((item, index) => {
                        if (this.$isNotEmpty(item.moduleValue)) {
                            path = path + item.moduleValue + ":"
                        }
                    })
                    return path
                }
                return ""
            },
            sortBy(attr, rev) {
                //第二个参数没有传递 默认升序排列
                if (rev == undefined) {
                    rev = 1;
                } else {
                    rev = (rev) ? 1 : -1;
                }

                return function (a, b) {
                    a = a[attr];
                    b = b[attr];
                    if (a < b) {
                        return rev * -1;
                    }
                    if (a > b) {
                        return rev * 1;
                    }
                    return 0;
                }
            },
            // 获取数据列表
            getDataTable() {
                this.loading = true
                let query = {
                    page: '1',
                    limit: '200'
                };
                const path = this.getPath()
                actionService.getactionlist(query).then(data => {
                    if (data) {
                        this.tabledata = []
                        data.forEach(element => {
                            this.tabledata.push({
                                actionName: element.actionName,
                                actionValue: element.actionValue,
                                authority: path + element.actionValue,
                            })
                        });
                    }
                    this.loading = false;
                }).catch((res) => {
                    this.loading = false;
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true
                        var params = {
                            moduleId: this.moduleId,
                            btnInfos: this.multipleSelection
                        }
                        menuService.saveAuthorityBtn(params).then(data => {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.submitLoading = false
                                    this.closeDailog()
                                    this.$emit('refreshDataList')
                                }
                            })
                        }).catch((res) => {
                            this.submitLoading = false
                            this.closeDailog()
                        })
                    }
                })
            },
            closeDailog() {
                this.$refs['dataForm'].resetFields()
                this.visible = false
            },
        }
    }
</script>